<template>
  <div>
    <van-nav-bar>
      <template #left>
        <van-search
          class="icon"
          v-model="values"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #label>
            <div class="list" @click="tabulation(area)">
              <span>{{ area }}</span>
              <van-icon name="arrow-down" color="#7f7f80" />
            </div>
          </template>
          <template #action>
            <van-icon name="location-o" size="7vw" />
          </template>
        </van-search>
      </template>
    </van-nav-bar>
    <div class="box" @click="onClickLeft">
      <van-icon name="arrow-left" color="#fff" size="7vw" />
    </div>
    <!-- 下拉框 -->
    <van-dropdown-menu>
      <van-dropdown-item>
        <template #title>
          <h4>区域</h4>
        </template>
        <template #default>
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirmAgg"
            @cancel="onCancel"
          >
            <template #confirm>
              <van-button type="primary">主要按钮</van-button>
            </template>
          </van-picker>
        </template>
      </van-dropdown-item>
      <van-dropdown-item>
        <template #title>
          <h4>方式</h4>
        </template>
        <template #default>
          <van-picker
            show-toolbar
            :columns="wayL"
            @confirm="onConfirmAgg"
            @cancel="onCancel"
          />
        </template>
      </van-dropdown-item>
      <van-dropdown-item>
        <template #title>
          <h4>租金</h4>
        </template>
        <template #default>
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirmAgg"
            @cancel="onCancel"
          />
        </template>
      </van-dropdown-item>
      <van-dropdown-item>
        <template #title>
          <van-cell @click="showPopup">筛选</van-cell>
          <van-popup
            v-model="show"
            position="right"
            :style="{ height: '100%' }"
          >
            <div class="pop-up">
              <div class="houssetype">
                <p>户型</p>
                <div class="gethous">
                  <div class="hezi">一室</div>
                  <div class="hezi">二室</div>
                  <div class="hezi">三室</div>
                  <div class="hezi">四室</div>
                  <div class="hezi">四室+</div>
                </div>
              </div>
              <van-divider />
              <div class="but">
                <van-button type="default" class="clean">清除</van-button>
                <van-button type="primary" class="que">确认</van-button>
              </div>
            </div>
          </van-popup>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <Commodity
      v-for="(item, index) in list"
      :key="index"
      :item="item"
    ></Commodity>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Commodity from '@/components/commodity.vue'
import { houseList } from '@/api/house'
export default {
  components: {
    Commodity
  },
  name: 'Tabulation',
  props: {},
  data () {
    return {
      list: [],
      params: {
        cityId: this.$route.params.cityId
          ? this.$route.params.cityId
          : 'AREA|dbf46d32-7e76-1196',
        start: 1,
        end: 20
      },
      area: this.$route.params.name ? this.$route.params.name : '上海',
      show: false,
      items: [
        {
          text: '浙江',
          children: [
            {
              text: '浙江',
              id: 1
            },
            {
              text: '温州',
              id: 2
            }
          ]
        }
      ],
      activeIds: [2],
      activeIndex: 0,
      values: '',
      wayL: ['不限', '整租', '合租'],
      columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州']
    }
  },
  methods: {
    tabulation (name) {
      // console.log(name)
      this.$router.push({ name: 'tabulationlist', params: { name } })
    },
    showPopup () {
      this.show = true
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    onSearch () {},
    onConfirmAgg (value, index) {
      console.log(value)
      console.log(index)
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    onCancel () {
      Toast('取消')
    }
  },
  async created () {
    const data = await houseList(this.params)
    console.log(data)
    this.list = data.body.list
    console.log(this.params.cityId)
  }
}
</script>

<style scoped lang="less">
.but {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  .que {
    flex: 3;
  }
  .clean {
    flex: 2;
  }
}
.pop-up {
  width: 75vw;
  .houssetype {
    p {
      margin-left: 3vw;
      color: #000;
    }
    .gethous {
      display: flex;
      flex-wrap: wrap;
      .hezi {
        margin-top: 5vw;
        margin-left: 5vw;
        width: 20vw;
        height: 8vw;
        line-height: 8vw;
        font-size: 3vw;
        color: #ccc;
        text-align: center;
        border: 1px solid #ccc;
      }
      .hezi:nth-child(odd) {
        margin-left: 15vw;
      }
    }
  }
}
h4 {
  font-size: 16px;
  font-weight: normal;
}
.icon {
  margin-left: 5%;
  width: 92vw;
}
.box {
  z-index: 11;
  position: absolute;
  margin-top: -10%;
  margin-left: 3%;
}
</style>
